<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>1.class样式的绑定</title>
    <style>
        .basic {
            width: 400px;
            height: 100px;
            border: 1px solid black;
        }

        /* 三种心情三选一 */
        .happy {
            border: 4px solide red;
            background-color: rgba(255, 255, 0, 0.64);
            background: linear-gradient(30deg, yellow, pink, orange, skyblue);
        }

        .sad {
            border: 4px dashed black;
            background-color: gray;
        }

        .normal {
            border: 4px, solid deeppink;
            background-color: skyblue;
        }

        /* 三个样式,随意选择,可以同时存在 */
        .atguigu1 {
            background-color: yellowgreen;
        }

        .atguigu2 {
            font-size: 30px;
            text-shadow: 2px, 2px, 10px red;
        }

        .atguigu3 {
            border-radius: 20px;
        }
    </style>
    <!-- 引入Vue -->
    <script type="text/javascript" src="../js/vue.js"></script>
</head>

<body>
    <!-- 
    绑定class样式的写法为:
    :class= "xxx" xxx 可以是字符串,对象,数组.
    (1).字符串的写法适用于:要绑定的样式,类名不确定.
    (2).对象的写法适用于:要绑定的样式,个数确定,类名确定,但不确定用还是不用.
    (3).数组的写法适用于,要要绑定的样式,,个数不确定,类名类名也不确定.
 -->

    <!-- 准备好一个容器-->
    <div id="demo">
        <!-- 字符串写法 -->
        <div class="basic" :class="str">你好啊!我是字符串写法</div>
        <button @click="changeMood">切换心情</button>
        <hr>
        <!-- 对象写法 -->
        <div class="basic" :class="obj">你好啊,我是对象写法</div>
        <button @click="obj.atguigu1 = !obj.atguigu1">应用or取消atguigu1</button>
        <button @click="obj.atguigu2 = !obj.atguigu2">应用or取消atguigu2</button>
        <button @click="obj.atguigu3 = !obj.atguigu3">应用or取消atguigu3</button>
        <hr>
        <!-- 数组写法 -->
        <div class="basic" :class="arr">你好啊!我是数组写法</div>
        <input type="text" @keyup.enter="addClassName">
    </div>
</body>

<script type="text/javascript">
    //阻止 vue 在启动时生成生产提示。
    Vue.config.productionTip = false
    new Vue({
        el: '#demo',
        data: {
            str: 'happy',
            obj: {
                atguigu1: true,
                atguigu2: true,
                atguigu3: true,
            },
            arr: []
        },
        methods: {
            changeMood() {
                const moodArr = ['happy', 'sad', 'normal']
                const index = Math.floor(Math.random() * 3)
                console.log(index)
                this.str = moodArr[index]
            },
            //添加一个class类名
            addClassName(event) {
                const {
                    value
                } = event.target
                this.arr.push(value)
            }
        },
    })
</script>

</html>